<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>radial-gradient()</title>
<meta name="description" content="CSS3参考手册之: radial-gradient()" />
<meta name="keywords" content="radial-gradient(), css3取值, css3, css3参考手册" />
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<meta name="robots" content="all" />
<!--[if lte IE 8]>
<script src="../../js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="../../skin/article.css" />
</head>
<body>
<nav id="guide" class="g-mod">
	<div class="from">
		<a href="http://css.doyoe.com/" target="_blank">CSS3参考手册</a>
		<span>&#187;</span>
		<a href="../index.htm">取值与单位列表</a>
		<span>&#187;</span>
		<a href="index.htm" id="category" rel="values/image" name="radial-gradient()">图像值</a>
		<span>&#187;</span>
	</div>
	<div class="to">
		<span class="label">相关内容：</span>
		<div class="g-combobox g-transition">
			<a href="?" class="g-transition target">
				<strong>其它图像值参考</strong>
				<span>选择其它项<!--[if lte IE 7]><ins>IE7 and earlier, Get to die</ins><![endif]--></span>
			</a>
			<div class="g-transition list">
				<ul>
					<!-- 插入分类快速导航 -->
				</ul>
			</div>
		</div>
	</div>
</nav>
<header id="hd">
	<section id="title" class="g-mod">
		<h1 class="tit">radial-gradient()</h1>
		<ul class="info">
			<li><strong>版本：CSS3</strong></li>
		</ul>
		<!-- 插入浏览器信息 -->
	</section>
</header>
<section id="bd">
	<section class="g-mod g-attr" id="syntax">
		<h2 class="tit">语法：</h2>
		<div class="cont">
			<p><strong>&lt;radial-gradient&gt;</strong> = radial-gradient([ [ <a href="#shape">&lt;shape&gt;</a> || <a href="#size">&lt;size&gt;</a> ] [ at <a href="#position">&lt;position&gt;</a> ]? , | at <a href="#position">&lt;position&gt;</a>, ]?<a href="#color-stop">&lt;color-stop&gt;</a>[ , <a href="#color-stop">&lt;color-stop&gt;</a> ]+)</p>
			<p id="position"><strong>&lt;position&gt;</strong> = [ <a href="../length/index.htm">&lt;length&gt;</a>① | <a href="../numeric/percentage.htm">&lt;percentage&gt;</a>① | left | center① | right ]? [ <a href="../length/index.htm">&lt;length&gt;</a>② | <a href="../numeric/percentage.htm">&lt;percentage&gt;</a>② | top | center② | bottom ]?</p>
			<p id="shape"><strong>&lt;shape&gt;</strong> = circle | ellipse</p>
			<p id="size"><strong>&lt;size&gt;</strong> = <a href="#extent-size">&lt;extent-keyword&gt;</a> | [ <a href="#circle-size">&lt;circle-size&gt;</a> || <a href="#ellipse-size">&lt;ellipse-size&gt;</a> ]</p>
			<p id="extent-keyword"><strong>&lt;extent-keyword&gt;</strong> = closest-side | closest-corner | farthest-side | farthest-corner</p>
			<p id="circle-size"><strong>&lt;circle-size&gt;</strong> = <a href="../length/length.htm">&lt;length&gt;</a></p>
			<p id="ellipse-size"><strong>&lt;ellipse-size&gt;</strong> = [ <a href="../length/length.htm">&lt;length&gt;</a> | <a href="../numeric/percentage.htm">&lt;percentage&gt;</a> ]{2}</p>
			<p id="dfn-syntax4"><strong>&lt;shape-size&gt;</strong> = <a href="../length/index.htm">&lt;length&gt;</a> | <a href="../numeric/percentage.htm">&lt;percentage&gt;</a></p>
			<p id="color-stop"><strong>&lt;color-stop&gt;</strong> = <a href="../color/color.htm">&lt;color&gt;</a> [ <a href="../length/length.htm">&lt;length&gt;</a> | <a href="../numeric/percentage.htm">&lt;percentage&gt;</a> ]?</p>
		</div>
	</section>
	<section class="g-mod g-attr" id="value">
		<h2 class="tit">取值：</h2>
		<div class="cont">
			<h3 class="g-color-light">&lt;position&gt; 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center</h3>
			<dl>
				<dt><a href="../numeric/percentage.htm">&lt;percentage&gt;</a>①：</dt>
				<dd>用百分比指定径向渐变圆心的横坐标值。可以为负值。</dd>
				<dt><a href="../length/index.htm">&lt;length&gt;</a>①：</dt>
				<dd>用长度值指定径向渐变圆心的横坐标值。可以为负值。</dd>
				<dt>left：</dt>
				<dd>设置左边为径向渐变圆心的横坐标值。</dd>
				<dt>center①：</dt>
				<dd>设置中间为径向渐变圆心的横坐标值。</dd>
				<dt>right：</dt>
				<dd>设置右边为径向渐变圆心的横坐标值。</dd>
				<dt><a href="../numeric/percentage.htm">&lt;percentage&gt;</a>②：</dt>
				<dd>用百分比指定径向渐变圆心的纵坐标值。可以为负值。</dd>
				<dt><a href="../length/index.htm">&lt;length&gt;</a>②：</dt>
				<dd>用长度值指定径向渐变圆心的纵坐标值。可以为负值。</dd>
				<dt>top：</dt>
				<dd>设置顶部为径向渐变圆心的纵坐标值。</dd>
				<dt>center②：</dt>
				<dd>设置中间为径向渐变圆心的纵坐标值。</dd>
				<dt>bottom：</dt>
				<dd>设置底部为径向渐变圆心的纵坐标值。</dd>
			</dl>
			<h3 class="g-color-light">&lt;shape&gt; 确定圆的类型</h3>
			<dl>
				<dt>circle：</dt>
				<dd>指定圆形的径向渐变</dd>
				<dt>ellipse：</dt>
				<dd>指定椭圆形的径向渐变。</dd>
			</dl>
			<h3 class="g-color-light">&lt;extent-keyword&gt; circle | ellipse 都接受该值作为 size</h3>
			<dl>
				<dt>closest-side：</dt>
				<dd>指定径向渐变的半径长度为从圆心到离圆心最近的边</dd>
				<dt>closest-corner：</dt>
				<dd>指定径向渐变的半径长度为从圆心到离圆心最近的角</dd>
				<dt>farthest-side：</dt>
				<dd>指定径向渐变的半径长度为从圆心到离圆心最远的边</dd>
				<dt>farthest-corner：</dt>
				<dd>指定径向渐变的半径长度为从圆心到离圆心最远的角</dd>
			</dl>
			<h3 class="g-color-light">&lt;circle-size&gt; circle 接受该值作为 size</h3>
			<dl>
				<dt><a href="../length/length.htm">&lt;length&gt;</a>：</dt>
				<dd>用长度值指定正圆径向渐变的半径长度。不允许负值。</dd>
			</dl>
			<h3 class="g-color-light">&lt;ellipse-size&gt; ellipse 接受该值作为 size</h3>
			<dl>
				<dt><a href="../length/length.htm">&lt;length&gt;</a>：</dt>
				<dd>用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。</dd>
				<dt><a href="../numeric/percentage.htm">&lt;percentage&gt;</a>：</dt>
				<dd>用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。</dd>
			</dl>
			<h3 class="g-color-light">&lt;color-stop&gt; 用于指定渐变的起止颜色：</h3>
			<dl>
				<dt><a href="../color/color.htm">&lt;color&gt;</a>：</dt>
				<dd>指定颜色。</dd>
				<dt><a href="../length/length.htm">&lt;length&gt;</a>：</dt>
				<dd>用长度值指定起止色位置。不允许负值</dd>
				<dt><a href="../numeric/percentage.htm">&lt;percentage&gt;</a>：</dt>
				<dd>用百分比指定起止色位置。不允许负值</dd>
			</dl>
		</div>
	</section>
	<section id="intro" class="g-mod g-attr">
		<h2 class="tit">说明：</h2>
		<div class="cont">
			<strong>用径向渐变创建图像。</strong>
			<ul>
				<li>
					<p>用默认的渐变方向绘制一个最简单的径向渐变</p>
					<div class="gquote">
						<p class="gquote-tit"><strong>示例代码：</strong></p>
						<div class="gquote-cont">
							<p class="img"><image src="images/radial-gradient.png" /><br />（图一）</p>
							<blockquote class="code"><code><xmp>radial-gradient(circle, #f00, #ff0, #080);
radial-gradient(circle at center, #f00, #ff0, #080);
radial-gradient(circle at 50%, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);</xmp></code></blockquote>
						</div>
						<p class="gquote-info">以上几句代码都可以实现如（图一）的渐变效果</p>
					</div>
				</li>
				<li>
					<p><a href="#shape">&lt;shape&gt;</a> 和 <a href="#size">&lt;size&gt;</a> 使用注意：</p>
					<div class="gquote gquote-warning">
						<p class="gquote-tit"><strong>错误代码：</strong></p>
						<div class="gquote-cont">
							<blockquote class="code"><code><xmp>radial-gradient(circle 50px 50px, #f00, #ff0, #080);</xmp></code></blockquote>
						</div>
						<p class="gquote-info">因为 circle 是正圆，一个值就能表示其直径长度，所以此时 <a href="#size">&lt;size&gt;</a> 只能是一个值。</p>
					</div>
					<div class="gquote gquote-warning">
						<p class="gquote-tit"><strong>错误代码：</strong></p>
						<div class="gquote-cont">
							<blockquote class="code"><code><xmp>radial-gradient(circle 50%, #f00, #ff0, #080);</xmp></code></blockquote>
						</div>
						<p class="gquote-info">circle 不接受 <a href="#size">&lt;size&gt;</a> 的值是 <a href="../numeric/percentage.htm">&lt;percentage&gt;</a>。</p>
					</div>
				</li>
				<li>
					<p>不通过 <a href="#shape">&lt;shape&gt;</a> 来表示圆和椭圆的方法：</p>
					<div class="gquote">
						<p class="gquote-tit"><strong>以下2行代码都可以表示一个圆：</strong></p>
						<div class="gquote-cont">
							<blockquote class="code"><code><xmp>radial-gradient(100px, #f00, #ff0, #080); /* 1 */
radial-gradient(100px 100px, #f00, #ff0, #080); /* 2 */
radial-gradient(50px 100px, #f00, #ff0, #080); /* 3 */</xmp></code></blockquote>
						</div>
						<div class="gquote-info">
							<p>代码1：只给出100px，所以被当成是正圆的半径，于是就能确定一个直径为100px的圆；</p>
							<p>代码2：给出了2个值，按理应该是要画一个椭圆的，但2个值相等，所以这个椭圆其实此时是个正圆形态。需要注意的是，代码2如果加上 circle，那将是错误语法，因为这是2个值只有椭圆才接受；</p>
							<p></p>
							<p>代码3：表示了一个水平半径为50px，垂直半径为100px的椭圆</p>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</section>
	<section id="compatible" class="g-mod g-attr">
		<h2 class="tit">兼容性：</h2>
		<div class="cont">
			<ul class="support-type">
				<li><span class="support">浅绿</span> = 支持</li>
				<li><span class="unsupport">红色</span> = 不支持</li>
				<li><span class="partsupport">粉色</span> = 部分支持</li>
			</ul>
			<table class="g-data">
				<thead>
					<tr>
						<th>IE</th>
						<th>Firefox</th>
						<th>Chrome</th>
						<th>Safari</th>
						<th>Opera</th>
						<th>iOS Safari</th>
						<th>Android Browser</th>
						<th>Android Chrome</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="unsupport">6.0-9.0</td>
						<td class="unsupport">2.0-3.5</td>
						<td class="partsupport">4.0-9.0<br /><sup class="fix">-webkit-</sup> <sup><a href="#support1">#1</a></sup></td>
						<td class="unsupport">3.1-3.2</td>
						<td class="support" rowspan="4">15.0+</td>
						<td class="partsupport">3.2-4.3<br /><sup class="fix">-webkit-</sup> <sup><a href="#support1">#1</a></sup></td>
						<td class="partsupport">2.1-3.0<br /><sup class="fix">-webkit-</sup> <sup><a href="#support1">#1</a></sup></td>
						<td class="support">10.0-25.0<br /><sup class="fix">-webkit-</sup> <sup><a href="#support1">#1</a></sup></td>
					</tr>
					<tr>
						<td class="support" rowspan="3">10.0+</td>
						<td class="support">3.6-15.0<br /><sup class="fix">-moz-</sup></td>
						<td class="support">10.0-25.0<br /><sup class="fix">-webkit-</sup></td>
						<td class="partsupport">4.0-5.0<br /><sup class="fix">-webkit-</sup> <sup><a href="#support1">#1</a></sup></td>
						<td class="support">5.0-6.1</td>
						<td class="support">4.0-4.3<br /><sup class="fix">-webkit-</sup></td>
						<td class="support" rowspan="3">26.0+</td>
					</tr>
					<tr>
						<td class="support" rowspan="2">16.0+</td>
						<td class="support" rowspan="2">26.0+</td>
						<td class="support">5.1-6.0<br /><sup class="fix">-webkit-</sup></td>
						<td class="support" rowspan="2">7.0+</td>
						<td class="support" rowspan="2">4.4+</td>
					</tr>
					<tr>
						<td class="support">6.1+</td>
					</tr>
				</tbody>
			</table>
			<ol class="support-info">
				<li id="support1">使用过时的语法：-webkit-gradient(radial,…)</li>
			</ol>
		</div>
	</section>
	<section id="example" class="g-mod g-attr">
		<h2 class="tit">示例：</h2>
		<div class="cont">
			<textarea cols="90" rows="10">
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>radial-gradient()_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
div {
	width: 200px;
	height: 100px;
	margin-top: 10px;
	border: 1px solid #ddd;
}
.test {
	background: radial-gradient(circle at center, #f00, #ff0, #080);
}
.test2 {
	background: radial-gradient(circle closest-side, #f00, #ff0, #080);
}
.test3 {
	background: radial-gradient(farthest-side, #f00 20%, #ff0 50%, #080 80%);
}
.test4 {
	background: radial-gradient(at top right, #f00, #ff0, #080);
}
.test5 {
	background: radial-gradient(farthest-side at top right, #f00, #ff0, #080);
}
.test6 {
	background:
				radial-gradient(farthest-side at top right, #f00, #ff0, #080, transparent),
				radial-gradient(60px at top left, #f00, #ff0, #080);
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
<div class="test6"></div>
</body>
</html>
			</textarea>
			<p><input type="button" value="运行" class="g-btn g-btn-sure" /></p>
		</div>
	</section>
</section>
<footer id="ft">
	<aside id="rights" class="g-mod">
		<!-- 插入浏览器及版权信息 -->
	</aside>
</footer>
<script src="../../js/jquery.js"></script>
<script src="../../js/inner.js"></script>
</body>
</html>